<template>
  <div class="ch-login-container">
    <el-form ref="loginForm" :rules="loginUserFormRules" class="ch-login-form" label-width="140px" label-position="left" :model="loginUser" :inline="true">
      <el-form-item>
        <div class="ch-system-title">示例系统</div>
      </el-form-item>
      <el-form-item prop="userName">
        <template #label><span class="ch-login-form-item-label">用户名: </span></template>
        <el-input prefix-icon="el-icon-user" :maxlength="30" v-model="loginUser.userName"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <template #label><span class="ch-login-form-item-label">密码: </span></template>
        <el-input prefix-icon="el-icon-lock" type="password" :show-password="true" :maxlength="16" v-model="loginUser.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="ch-login-button mr10" type="primary" :loading="loginLoading.value" @click="submitLogin(loginUser, $refs.loginForm, loginLoading)">登录</el-button>
        <el-button class="ch-login-button" type="primary">忘记密码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, Ref} from 'vue';
import {LoginUser, LoginUserFormRule, submitLogin} from '@/model/UserClass';
import { Loading } from '@/model/LoadingClass';

export default defineComponent({
  name: 'Login',
  setup() {
    let loginUser: LoginUser = reactive<LoginUser>({userName: '', password: ''});
    let loginUserFormRules: LoginUserFormRule = reactive<LoginUserFormRule>({
      userName: [{required: true, trigger: ['blur', 'change'], message: '用户名必输'}],
      password: [{required: true, trigger: ['blur', 'change'], message: '密码必输'}],
    });
    let loginLoading: Loading = reactive<Loading>({value: false});
    return { loginUser, loginUserFormRules, submitLogin, loginLoading };
  }
});
</script>

<style lang="scss" scoped>
$bg:#283443;
$light_gray:#eee;
$cursor: #fff;

.ch-login-container {
  height: 100%;
  width: 100%;
  background: $bg;
}
.ch-login-form{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center;
  ::v-deep .el-form-item {
    .el-input {
      width: 300px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
      height: 47px;
      font-size: 24px;
      input {
        background: transparent;
        border: 0;
        -webkit-appearance: none;
        border-radius: 0;
        color: $light_gray;
        font-size: 24px;
        font-weight: 600;
        caret-color: $cursor;
        &:-webkit-autofill {
          box-shadow: 0 0 0 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
      .el-input-group__prepend{
        border: 1px solid #283443;
        input {
          background: #283443;
          &:hover {
            background: #283443;
          }
        }
      }
    }
  }
  .ch-system-title{
    text-align: center;
    width: 440px;
    font-size: 30px;
    color: $light_gray;
    letter-spacing: 5px;
    margin-bottom: 22px;
    font-weight: 800;
  }
  .ch-login-form-item-label{
    color: $light_gray;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 5px;
  }
  ::v-deep .ch-login-button{
    width: 210px;
  }
  ::v-deep .el-form-item__label:before{
    display: none;
  }
}

</style>
